import clsx from "clsx"
import styles from './style.module.css'
import { useState } from "react"

type IFilterRadio = {
    data: Record<string, string | number>[];
    onChange?: (value: any) => void;
    value?: string | number
}

function FilterRadio({ data, onChange, value }: IFilterRadio) {

    return (
        <>
            <div className=" pr-[30.7px] flex gap-x-[20.7px]">
                {data.map(item => {
                    return <div
                        key={item.value}
                        className={clsx(`
                    w-[215.3px] 
                    h-[56px] 
                    bg-[#F5F5F5]
                    text-[26px]
                    text-center
                    leading-[50px]
                    rounded-[8px]
                    `, value == item.value && styles.active)}
                        onClick={() => {
                            if (onChange) {
                                onChange(item.value)
                            }
                        }}
                    >
                        {item.label}
                    </div>
                })}
            </div>
        </>
    )
}
export default FilterRadio